<template>
	<scroll-view scroll-y="true" :style="{height:windowHeight+'px'}" ref="page" :scroll-top="scrollTop" @scroll="scroll">
		<view @click="whole.onClick" id="onClick"></view>
		<view class="log-key-view">
			<text>按键：</text>
			<text>{{key}}</text>
		</view>
		<slot></slot>
	</scroll-view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		name: "unitvPage",
		props: {
			id: {
				type: String,
				required: true
			},
			prePageId: {
				type: String
			}
		},
		provide() {
			return {
				pageId: this.id,
				pageState: this.pageState
			}
		},
		created() {
			this.switchPage(this);
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight;
				}
			});
			
		},
		mounted() {
			
		},
		computed: {
			...mapState(['currentZone'])
		},
		data() {
			return {
				key: '',
				windowHeight: null,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				Zone: [],
				pageState: {
					curZoneId: ""
				}
			}
		},
		methods: {
			...mapMutations(['switchPage', 'switchZone']),
			pushZone(zone) {
				this.Zone[zone.id] = zone;
			},
			keyCodeClick(keyCode) {
				this.key = keyCode;
				var zone = this.currentZone;
				//根据按键，调用相应函数
				switch (keyCode) {
					case 'KeyUp':
						zone.evtArrow('up');
						break;
					case 'KeyDown':
						zone.evtArrow('down');
						break;
					case 'KeyLeft':
						zone.evtArrow('left');
						break;
					case 'KeyRight':
						zone.evtArrow('right');
						break;
					case 'KeyEnter':
						zone.evtEnter();
						break;
					case 'KeyBack':
						this.evtBack();
						break;
				};
			},
			evtBack:function(){
				this.$emit("back");
				this.key = "KeyBack";
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			ChangeZone(zoneId) {
				var zone = this.Zone[zoneId];
				if (zone) {
					this.currentZone.zoneState.curZone = false;
					this.pageState.curZoneId = zoneId;
					zone.zoneState.curZone = true;
					this.switchZone(this.Zone[zoneId]);
				}
			},
			RefreshScrollTop(clientRect) {
				var top = clientRect.top;
				if (top > 0) {
					top = clientRect.bottom;
				}
				if (top > this.windowHeight) {
					var top1=this.old.scrollTop + (top - this.windowHeight + 10);
					this.scrollTop = top1
				} else if (top < 0) {
					this.scrollTop = this.old.scrollTop + (top - 20);
				}

			}
		},
		watch: {}
	}
</script>
<script module="whole" lang="renderjs">
	let code;
	let KeyName = {
		19: 'KeyUp',
		38: 'KeyUp', //Keyboard
		20: 'KeyDown',
		40: 'KeyDown', //Keyboard
		21: 'KeyLeft',
		37: 'KeyLeft', //Keyboard
		22: 'KeyRight',
		39: 'KeyRight', //Keyboard
		23: 'KeyEnter',
		13: 'KeyEnter', //Keyboard
		4: 'KeyBack',
		18: 'KeyBack', //Keyboard Alt键
		27: 'KeyBack', //Keyboard ESC
		24: 'KeyBack', //Keyboard ESC
		66: 'KeyEnter',
		111: 'KeyBack'
	};
	export default {
		mounted() {
			//全局监听按键输入
			window.document.onkeydown = function(evt) {
				evt = evt || window.event;
				
				var KeyCode = evt.which || evt.keyCode;
				//document.getElementById("onClick").click();
				code = KeyName[KeyCode];
				if(code!='KeyBack'){
					evt.preventDefault();
				}
				if(code!=undefined){
				document.getElementById("onClick").click();
				}
			}

		},
		methods: {
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('keyCodeClick', code);

			}
		}
	}
</script>
<style scoped>
	.log-key-view {
		position: fixed;
		right: 0;
		color: #FFFFFF;
		font-size: 20rpx;
		background: #007AFF;
		top: 0;
		z-index: 999;
	}
</style>
